<template>
  <div class="container">
    <div class="back">
      <i class="el-icon-arrow-left c-font-b" @click="back">菜品审核</i>
    </div>
    <!--    审核列表区域-->
    <div class="audit-form">
      <el-form :model="auditForm" label-position="right" label-width="80px">
        <el-form-item label="菜品图片:">
          <img :src="auditForm.images" alt="" />
        </el-form-item>
        <el-form-item label="菜品编号:">
          <span>{{ auditForm.number }}</span>
        </el-form-item>
        <el-form-item label="菜品名称:">
          <span>{{ auditForm.name }}</span>
        </el-form-item>
        <el-form-item label="菜品归类:">
          <span>{{ auditForm.type === 1 ? "荤菜" : "素菜" }}</span>
        </el-form-item>
        <el-form-item label="所属食堂:">
          <sapn>{{ canteenDetail.name }}</sapn>
        </el-form-item>
        <el-form-item label="试吃时间:">
          <span>{{ auditForm.type }}</span>
        </el-form-item>
        <el-form-item label="试吃定价:">
          <span>{{ auditForm.type }}</span>
        </el-form-item>
        <el-form-item label="试吃图片:">
          <span>{{ auditForm.type }}</span>
        </el-form-item>
        <el-form-item label="菜品详情:">
          <div v-html="auditForm.details"></div>
        </el-form-item>
        <el-form-item label="审核意见:">
          <el-input
            type="textarea"
            rows="6"
            style="width: 400px"
            v-model="auditForm.audit"
          ></el-input>
        </el-form-item>
        <el-form-item class="c-m-t-10">
          <el-button type="success" size="mini" @click="submit">通过</el-button>
          <el-button type="danger" size="mini" @click="reject">驳回</el-button>
          <el-button size="mini" @click="back">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { useRouter, useRoute } from "vue-router";
import { onMounted, ref } from "vue";
import { foodAuditDetail, foodSubmitAudit } from "../../../api/canteen/audit";
import { ElMessage } from "element-plus";

export default {
  name: "Audit-detail",
  setup() {
    onMounted(() => {
      foodId.value = route.query.id;
      getFoodDetail();
    });
    const foodId = ref("");
    const route = useRoute();
    const router = useRouter();
    const auditForm = ref({});
    // 食堂数据
    const canteenDetail = ref({});
    function back() {
      router.back();
    }
    // 获取菜品详情
    function getFoodDetail() {
      foodAuditDetail(foodId.value).then((res) => {
        auditForm.value = res.data;
        canteenDetail.value = auditForm.value.canteen;
      });
    }
    // 通过审核
    function submit() {
      if (auditForm.value.audit) {
        foodSubmitAudit(foodId.value, {
          auditFlag: true,
          auditReason: auditForm.value.audit,
        }).then(() => {
          ElMessage.success("审核成功");
          router.back(-1);
        });
      } else {
        ElMessage.warning("请填写审核意见");
      }
    }
    // 驳回审核
    function reject() {
      if (auditForm.value.audit) {
        foodSubmitAudit(foodId.value, {
          auditFlag: false,
          auditReason: auditForm.value.audit,
        }).then(() => {
          ElMessage.success("驳回成功");
          router.back(-1);
        });
      } else {
        ElMessage.warning("请填写审核意见");
      }
    }
    return {
      back,
      auditForm,
      canteenDetail,
      submit,
      reject,
    };
  },
};
</script>

<style scoped lang="scss">
.container {
  background: #ffffff;
  border-radius: 6px;
  overflow-y: auto;
  box-shadow: 0px 0px 16px rgba(96, 96, 96, 0.16);
  .back {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #edeff3;
  }
  .audit-form {
    padding: 10px 20px;
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
